<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>播放器</title>
</head>

<body class="page-player dpflex fdcolumn">
    <!-- 视频容器 -->
    <div class="video-container flex1">
        <video style="width: 100%; height: 100%;" id="video" muted></video>
        <div class="text-container">
            <div class="part-container"><span id="curPart"></span> / <span id="sumPart"></span> </div>
            <p id="curTitle" class="mt16"></p>
        </div>
    </div>

    <!-- 控制按钮 -->
    <div class="controls dpflex aicenter">
        <i id="preBtn" class="iconfont iconxueyuan-shangyijie"></i>
        <i id="stopBtn" class="iconfont iconzanting"></i>
        <i id="nextBtn" class="iconfont iconxueyuan-xiayijie"></i>
    </div>

    <!-- 进度条 -->
    <div id="progress" class="progress"></div>


    <!-- 暂停蒙层 -->
    <div id="stopMask" class="stop-mask">
        <p class="text mt20">放弃可以找一万个理由，找理由好难，所以不放弃</p>

        <div class="btns dpflex aicenter">
            <div id="continueBtn" class="btn-continue dpflex fdcolumn jscenter aicenter">
                <i class="iconfont iconbofang"></i>
                <span>继续训练</span>
            </div>
            <div id="overBtn" class="btn-over dpflex fdcolumn jscenter aicenter">
                <i class="iconfont iconjieshu"></i>
                <span>结束训练</span>
            </div>
        </div>

        <div class="current dpflex">
            <div class="cur-img flex1">
                <img width="100%" height="100%" id="curImg" alt="当前节图片">
            </div>
            <div class="cur-title flex1 dpflex fdcolumn aicenter jscenter">
                <h6>当前</h6>
                <p id="maskCurTitle"></p>
            </div>
        </div>

    </div>

</body>

</html>